import { EasyPlayer } from '@/components/LivePlayer/EasyPlayer';
import { WHEPPlayer } from '@/components/LivePlayer/WHEPPlayer';
import { useAsyncEffect } from 'ahooks';
import { useEffect, useRef, useState } from 'react';
import styles from './index.less';

const LivePlayer = ({
  streamKey,
  className,
  visible,
  controls,
  muted,
  type,
  server,
  cache,
}: {
  /**
   * 进程名称
   */
  streamKey: string;
  /**
   * class名称
   */
  className?: string;
  /**
   * 控制栏
   */
  controls?: boolean;
  /**
   * 是否静音
   */
  muted?: boolean;
  /**
   * 是否显示
   */
  visible: boolean;
  server?: string;
  cache?: boolean;
  type:
    | 'M7S_WebRTC'
    | 'M7S_FLV'
    | 'SRS_WebRTC'
    | 'SRS_FLV'
    | 'Encoder_WebRTC'
    | 'Costomer_WebRTC';
}) => {
  muted = muted == undefined ? true : muted;
  cache = cache == undefined ? false : cache;
  server = server == undefined ? location.hostname : server;
  const ref = useRef<HTMLDivElement>(null);
  const [streamUrl, setStreamUrl] = useState('');
  const [play, setPlay] = useState(false);

  useAsyncEffect(async () => {
    const [app, stream] = `live/${streamKey}`.split('/');
    if (type === 'Encoder_WebRTC') {
      setStreamUrl(`http://${server}/whep?key=${stream}`);
      console.log('Encoder_WebRTC', `http://${server}/whep?key=${stream}`);
    } else if (type === 'M7S_WebRTC') {
      setStreamUrl(`http://${server}:8080/webrtc/play/live/${stream}`);
    } else if (type === 'SRS_WebRTC') {
      setStreamUrl(
        `http://${server}:1985/rtc/v1/whip-play/?app=${app}&stream=${stream}.flv`,
      );
    } else if (type === 'M7S_FLV') {
      setStreamUrl(`http://${server}:8080/hdl/live/${streamKey}.flv`);
    } else if (type === 'SRS_FLV') {
      setStreamUrl(`http://${server}:8080/live/${streamKey}.flv`);
    } else if (type === 'Costomer_WebRTC') {
      const [app, stream] = `${streamKey}`.split('/');
      setStreamUrl(
        `http://${server}:1985/rtc/v1/whip-play/?app=${app}&stream=${stream}.flv`,
      );
    }
  }, [streamKey, type]);

  useEffect(() => {
    setTimeout(async () => {
      setPlay(visible);
    }, 100);
  }, [visible]);

  useEffect(() => {
    return () => {
      setPlay(false);
    };
  }, []);

  return (
    <div
      ref={ref}
      className={[
        className,
        styles.player,
        controls ? '' : styles.hideControl,
      ].join(' ')}
    >
      {type === 'Encoder_WebRTC' && (
        <WHEPPlayer
          url={streamUrl}
          controls={controls}
          muted={muted}
          play={play}
        />
      )}
      {type === 'M7S_WebRTC' && (
        <WHEPPlayer
          url={streamUrl}
          cache={cache}
          controls={controls}
          muted={muted}
          play={play}
        />
      )}
      {type === 'SRS_WebRTC' && (
        <WHEPPlayer
          url={streamUrl}
          cache={cache}
          controls={controls}
          muted={muted}
          play={play}
        />
      )}
      {type === 'M7S_FLV' && (
        <EasyPlayer url={streamUrl} play={play} muted={muted} />
      )}
      {type === 'SRS_FLV' && (
        <EasyPlayer url={streamUrl} play={play} muted={muted} />
      )}
      {type === 'Costomer_WebRTC' && (
        <WHEPPlayer url={streamUrl} play={play} muted={muted} />
      )}
    </div>
  );
};
export default LivePlayer;
